var x = false, y = false, z = false, h = false;
// 用户名的正则表达式
var userReg = /^[a-z_]{1}\w{3,20}$/i;

// 直接绑定失去焦点事件
$('.input1-xfat').onblur = function () {
    // 获取用户名进行验证
    if (userReg.test(this.value)) {
        // 设置span的内容
        console.log(this);
        console.log(this.nextElementSibling);
        this.nextElementSibling.innerHTML = '*用户名合法';
        this.nextElementSibling.style.color = 'green';
        x = true;
        username = this.value;
        // console.log(username);
    } else {

        this.nextElementSibling.innerHTML = '*用户名不合法';
        this.nextElementSibling.style.color = 'red';
        x = false;
    }
}

$('.input2-xfat').onblur = function () {
    let nameReg = /[\u4E00-\u9FA5]{2,10}/;
    if (nameReg.test(this.value)) {
        this.nextElementSibling.innerHTML = '*昵称合法';
        this.nextElementSibling.style.color = 'green';
        h = true;
        nickname = this.value
    } else {
        this.nextElementSibling.innerHTML = '*昵称不合法';
        this.nextElementSibling.style.color = 'red';
        h = false
    }
}

$('.input3-xfat').onblur = function () {
    //判断密码长度
    if (this.value.length >= 6 && this.value.length <= 20) {
        // 判断密码的强度,有一种符号,则设置一次数字
        var a = 0, b = 0, c = 0;

        // 数字的验证
        var numReg = /\d+/;
        numReg.test(this.value) && (a = 1);
        // 字母验证
        var codeReg = /[a-z]+/i;
        codeReg.test(this.value) && (b = 1);

        // 特殊符号验证
        var speReg = /[^\da-z]+/i;
        speReg.test(this.value) && (c = 1);

        // console.log(a, b, c);
        // 根据结果判断强中弱
        var result = '弱';
        (a + b + c == 3) && (result = '强');
        (a + b + c == 2) && (result = '中');

        this.nextElementSibling.innerHTML = result;
        this.nextElementSibling.style.color = 'green';
        // 设置密码验证通过
        y = true;
        password = this.value
        // console.log(password);
    } else {

        this.nextElementSibling.innerHTML = '*密码长度不符合要求';
        this.nextElementSibling.style.color = 'red';
        y = false;
    }
}

// 重复密码
$('.input4-xfat').onblur = function () {
    var value3 = document.querySelector('.input3-xfat')
    // console.log(value3.value);
    if (this.value == value3.value) {
        this.nextElementSibling.innerHTML = '*两次密码一致';
        this.nextElementSibling.style.color = 'green';
        z = true
        rpassword = this.value
        // console.log(rpassword);
    } else {
        this.nextElementSibling.innerHTML = '*两次密码不一致';
        this.nextElementSibling.style.color = 'red';
        z = false
    }
}

// 点击提交,则验证前面的结果
$('.controls .sui-btn').onclick = function () {
    // console.log(x, y, z);
    if (x && y && z && h) {
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        // 发送ajax登录
        let param = `username=${username}&password=${password}&rpassword=${rpassword}&nickname=${nickname}`;
        axios.post('http://localhost:8888/users/register', param).then(({ status, data }) => {
            // console.log(data, status);
            if (!status == 200 || !data == 1) {
                layer.msg('注册失败');
            } else {
                layer.msg('注册成功');
            }
        })
    }
}
// class Register{
//     x = false;
//     y = false;
//     z = false;
//     h = false;
//     username = '';
//     nickname = '';

//     constructor(){
//         this.bindEve();
//     }
//     bindEve(){
//         this.$('.input1-xfat').addEventListener('blur', this.first_inp);
//         this.$('.input2-xfat').addEventListener('blur', this.second_inp);
//         this.$('.input3-xfat').addEventListener('blur', this.third_inp);
//         this.$('.input4-xfat').addEventListener('blur', this.fourth_inp);
//         this.$('.controls .sui-btn').addEventListener('click',this.clickFn.bind(this));
//     }

//     // 给用户框绑定失去焦点事件
//     first_inp(){
//         // 设置正则表达式
//         var user = /^[\w\-\u4E00-\u9FA5]{4,20}$/;
//         // console.log(this);
//         // 获取用户框节点的value值
//         // var username = this.value;
//         // console.log(value);
//         // 判断value是否满足正则表达式
//         if(user.test(this.value)){
//             // 成功弹出正确
//             layer.tips('密码正确', '.input1-xfat');
//             // 把x的值设为true
//             username = this.value;
//             this.x = true;
//         }else{
//             // 否则弹出不正确
//             layer.tips('密码不正确', '.input1-xfat');
//             // 把x的值设为false
//             this.x = false;
//         }
//         console.log(this.x);
//     }

//     // 给昵称框绑定失去焦点事件
//     second_inp(){

//         // 昵称的正则表达式
//         var nameReg = /[\u4E00-\u9FA5]{2,10}/;
//         // console.log(this);
        
//         // 与正则表达式对比
//         if(nameReg.test(this.value)){
//             layer.tips('昵称合法', '.input2-xfat');
//             nickname = this.value;
//             this.y = true;
//         }else{
//             layer.tips('昵称不合法', '.input2-xfat');
//             this.y = false;
//         }
//         console.log(this.y);
//     }
//     // 给密码框绑定失去焦点事件
//     third_inp(){
       
//         if (this.value.length >= 6 && this.value.length <= 20) {
//             // 判断密码的强度,有一种符号,则设置一次数字
//             var a = 0, b = 0, c = 0;
    
//             // 数字的验证
//             var numReg = /\d+/;
//             numReg.test(this.value) && (a = 1);
//             // 字母验证
//             var codeReg = /[a-z]+/i;
//             codeReg.test(this.value) && (b = 1);
    
//             // 特殊符号验证
//             var speReg = /[^\da-z]+/i;
//             speReg.test(this.value) && (c = 1);
    
//             // console.log(a, b, c);
//             // 根据结果判断强中弱
//             var result = '弱';
//             (a + b + c == 3) && (result = '强');
//             (a + b + c == 2) && (result = '中');
//             layer.tips(result ,'.input3-xfat');
           
//             // 设置密码验证通过
//             this.z = true;
//             password = this.value
//             // console.log(password);
//         } else {

//             layer.tips('密码长度不符合要求' ,'.input3-xfat');

//             this.z = false;
//         }
//     }
//     fourth_inp(){

//         var value1 = document.querySelector('.input3-xfat').value;
//         //  console.log(value1);
//         if(this.value === value1){
//             layer.tips('密码一致', '.input4-xfat');
//             rpassword = this.value;
//             this.h = true;
         
//         }else{
//             layer.tips('密码不一致', '.input4-xfat');
//             this.h = false;
//         }
//         console.log(this.h);
//     }

//     clickFn(){
//         console.log(1111);
//         console.log(this.z && this.y && this.z && this.h);
//         if(this.x && this.y && this.z && this.h){
//             console.log(22222);
//             // 参数拼接，传递参数
//            let param = `username=${username}&password=${password}&rpassword=${rpassword}&nickname=${nickname}`;
//             // 设置参数的格式
//            axios.defaults.headers['Content-type'] = 'application/x-www-form-urlencoded'
//             // 发送ajax请求
//            axios.post('hyyp://localhost:8888/users/register', param).then(({data, status}) =>{
//             console.log(data, status);
//            })
//         }else{
//             console.log('budui');
//         }
//     }
//     // 获取节点
//     $(ele){
//         let res = document.querySelectorAll(ele);
//         return res.length ==1 ? res[0] : res;
//     }
// }
// new Register;